<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
			 xmlns:h="http://java.sun.com/jsf/html"
			 xmlns:f="http://java.sun.com/jsf/core"
			 xmlns:ui="http://java.sun.com/jsf/facelets"
			 xmlns:rich="http://richfaces.org/rich"
			 xmlns:a4j="http://richfaces.org/a4j"
			 xmlns:b="http://richfaces.org/sandbox/bootstrap">

  <h:head>
    <h:outputStylesheet library="css" name="modal-import_site.css" />
  </h:head>

	<h:form id="form-import-site">
	<div class="modal hide" id="modal-import-site">
		<div class="modal-header">
			<!-- <a class="modal-close" data-dismiss="modal" title="Close">Close</a> -->
			<h3>#{msg['redirect.admin.import.h']}</h3>
		</div>
		<div class="modal-body">
			<div id="file-input-holder" class="control-group">
				<rich:fileUpload id="upload" acceptedTypes="zip" binding="${importer.component}"
                                 maxFilesQuantity="5" noDuplicate="true"
                                 fileUploadListener="#{importer.importSite}"
                                 ontyperejected="alert('#{msg['redirect.admin.import.alert']}');"
                                 deleteLabel="#{msg['redirect.admin.import.remove']}"
                                 addLabel="#{msg['redirect.admin.import.select']}"
                                 uploadLabel="#{msg['redirect.admin.import.import']}"
                                 clearLabel="#{msg['redirect.admin.import.clear']}"
                                 clearAllLabel="#{msg['redirect.admin.import.clearall']}"
                                 onfileselect="$('#no-sites-div').hide();"
                                 onuploadcomplete="processLastUploadedFile()"
                                 onfilesubmit="processLastUploadedFile()">
				</rich:fileUpload>
				<rich:message for="upload" layout="list" styleClass="msg-hidden"/>
			</div><!-- End .control-group -->
			<br />
			<div class="control-group">
				<h:outputLabel for="mode" value="#{msg['redirect.admin.import.mode']}" styleClass="control-label" />
				<h:selectOneMenu id="mode" value="#{importer.importMode}" style="height: 30px;" >
					<f:selectItems value="#{importer.importModes.entrySet()}" var="mode" itemLabel="#{msg[mode.value]}" itemValue="#{mode.key}" />
					<f:ajax />
				</h:selectOneMenu>
			</div><!-- End .control-group -->
		</div><!-- End .modal-body -->
		<div class="modal-footer">
			<a href="#" class="btn data-dismiss-modal">#{msg['redirect.admin.import.cancel']}</a>
			<a href="#" id="button-import-site" class="btn btn-primary" onclick="$('.rf-fu-btn-cnt-upl').click();">#{msg['redirect.admin.import.but']}</a>
		</div>
	</div><!-- end .modal -->
	</h:form>

	<script type="text/javascript">

		var classError = "itm-error";
		var classSuccess = "itm-success";
		// Done message inserted via RF after file is uploaded
		var msgDone = "Done";

		// The status (error or success) of the last uploaded file is set depending
		// on the error message.
		function processLastUploadedFile(){
			// Iterate through the file list in the fileUpload component
			var items = $(".RedirectAdmin .rf-fu-lst .rf-fu-itm"); 
			items.each(function(idx){
				var fileItem = $(this);
				var msg = fileItem.find(".rf-fu-itm-st").html();
				// Status of file is already known
				var wasUpdated = fileItem.hasClass(classError) || fileItem.hasClass(classSuccess);
				// If the file was already uploaded and the status of processing
				// is yet unknown, set the status depending on the error message
				if ((msg == msgDone)) {
          if (!wasUpdated) {
            var isLast = (idx == items.length - 1);
            updateFileStatus(fileItem, isLast);
            return fileItem;
          }
				}				
			});
		}

		function updateFileStatus(fileElement, isLast) {
		// If error is present, there was an error while processing the file
			var error = $(".RedirectAdmin span.rf-msg.msg-hidden .rf-msg-det").size() > 0;

			if (error){
				fileElement.addClass(classError);
			} else {
				if (isLast) {
					window.setTimeout(function() {
					  //don't use reload, to avoid post back data
					  window.location.replace(window.location.href.replace("#", ''));		
					}, '1000');
				}
				fileElement.addClass(classSuccess);
			}
		}

		$(document).ready(function () {
			$(".rf-fu-btn-cnt-add").addClass("icon-download-alt").css("width", "auto");
			$(".rf-fu-btn-add").addClass("btn");
			$(".rf-fu-btn-add").css("padding", "2px 21px 2px 0px");

			$(".rf-fu-btn-cnt-clr").addClass("icon-remove").css("width", "auto");
			$(".rf-fu-btn-clr").addClass("btn");
			$(".rf-fu-btn-clr").css({
				"padding": "2px 21px 2px 0px",
				"display": "none"
			});

			noSitesDiv = $(document.createElement("div")).attr("id", "no-sites-div");
			noSitesDiv.css({"font-size": "40px", "color": "#CCC", "margin-top": "25px", "text-align": "center", "border": "2px dashed #CCC", "padding": "60px 20px", "border-radius": "20px"});
			noSitesDiv.text("#{msg['redirect.admin.import.nosite']}")
			$(".rf-fu-lst").append(noSitesDiv);
			$(".rf-fu-itm").addClass("attachment");
		});

	</script>

</ui:fragment>
